<template>
	<view class="content">
		<view class="title">
			<text>密码找回方式</text>
		</view>
		<view class="find-action">
			<text class="find-action-text" @click="useEmail">邮箱</text>
		</view>
		<view class="find-action">
			<text class="find-action-text" @click="userMobile">手机号码</text>
		</view>
		<view class="content-bottom">
			<contentBottom></contentBottom>
		</view>
	</view>
</template>

<script>
	import contentBottom from '../../../components/content-bottom/content-bottom.vue';
	export default {
		data() {
			return {
				
			};
		},
		components: {
			contentBottom
		},
		methods: {
			useEmail() {
				uni.navigateTo({
					url: '/pages/login/forgetPwd/useEmail'
				})
			},
			useMObile() {
				uni.navigateTo({
					url: '/pages/login/forgetPwd/useMobile'
				})
			}
		}
	};
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.title {
		display: flex;
		justify-content: center;
		font-size: 50rpx;
		font-weight: 600;
		margin: 10% 0 15% 0;
	}
	
	.find-action {
		display: flex;
		justify-content: center;
		padding: 8% 18%;
		margin: 40rpx 15%;
		border: 1px solid #000;
		border-radius: 30rpx;
		font-size: 40rpx;
		font-weight: 600;
		
	}
	.find-action:hover {
		box-shadow: 0 30rpx 35rpx -16rpx rgba(0, 0, 0, 0.5); /*横向偏移 纵向偏移 模糊半径 内收 颜色*/
		transform: perspective(500rpx) rotateX(20deg);
		transition: 0.3s;
	}
	
	.find-action-text:hover {
		transform: perspective(500rpx) translate3d(0,-60rpx,100rpx);
		transition: 0.3s;
		box-shadow: 0 80rpx 50rpx -10rpx rgba(0, 0, 0, 0.5);
	}
	
	.content-bottom {
		display: flex;
		justify-content: center;
		margin-top: 192rpx;
		font-size: 10rpx;
		color: #b3b3b3;
	}
	
</style>
